<template>
  <div class="products-index">
    <!-- 头部欢迎区 -->
    <div class="welcome-banner">
      <div class="banner-content">
        <h1>🛍️ 商品管理中心</h1>
        <p>统一管理商品信息、分类、价格、库存等，打造高效的商品管理体系</p>
      </div>
      <div class="banner-actions">
        <el-button type="primary" size="large" @click="handleAddProduct">
          <el-icon><Plus /></el-icon>
          新建商品
        </el-button>
        <el-button size="large" @click="handleImport">
          <el-icon><Upload /></el-icon>
          批量导入
        </el-button>
      </div>
    </div>

    <!-- 快速统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/products/list')">
          <el-statistic title="商品总数" :value="statistics.totalProducts">
            <template #prefix>
              <el-icon class="stat-icon" :style="{ color: '#409EFF' }">
                <Box />
              </el-icon>
            </template>
            <template #suffix>个</template>
          </el-statistic>
          <div class="stat-trend">
            <span :class="['trend', statistics.productsTrend > 0 ? 'up' : 'down']">
              <el-icon><CaretTop v-if="statistics.productsTrend > 0" /><CaretBottom v-else /></el-icon>
              {{ Math.abs(statistics.productsTrend) }}%
            </span>
            <span class="trend-label">较上月</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/products/categories')">
          <el-statistic title="商品分类" :value="statistics.totalCategories">
            <template #prefix>
              <el-icon class="stat-icon" :style="{ color: '#67C23A' }">
                <Grid />
              </el-icon>
            </template>
            <template #suffix>个</template>
          </el-statistic>
          <div class="stat-trend">
            <span class="trend-info">{{ statistics.activeCategories }}个启用中</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/products/brands')">
          <el-statistic title="品牌数量" :value="statistics.totalBrands">
            <template #prefix>
              <el-icon class="stat-icon" :style="{ color: '#E6A23C' }">
                <Medal />
              </el-icon>
            </template>
            <template #suffix>个</template>
          </el-statistic>
          <div class="stat-trend">
            <span class="trend-info">{{ statistics.topBrands }}个热门品牌</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" @click="navigateTo('/products/sku')">
          <el-statistic title="SKU总数" :value="statistics.totalSKUs">
            <template #prefix>
              <el-icon class="stat-icon" :style="{ color: '#F56C6C' }">
                <Files />
              </el-icon>
            </template>
            <template #suffix>个</template>
          </el-statistic>
          <div class="stat-trend">
            <span :class="['trend', statistics.skuTrend > 0 ? 'up' : 'down']">
              <el-icon><CaretTop v-if="statistics.skuTrend > 0" /><CaretBottom v-else /></el-icon>
              {{ Math.abs(statistics.skuTrend) }}%
            </span>
            <span class="trend-label">较上月</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷功能入口 -->
    <el-card class="quick-access">
      <template #header>
        <span>快捷功能</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="4" v-for="item in quickAccessList" :key="item.name">
          <div class="quick-item" @click="navigateTo(item.path)">
            <div class="quick-icon" :style="{ background: item.color }">
              <el-icon :size="32">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="quick-name">{{ item.name }}</div>
            <div class="quick-desc">{{ item.desc }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 商品管理模块 -->
    <el-row :gutter="20" class="modules-row">
      <el-col :span="8">
        <el-card shadow="hover" class="module-card">
          <div class="module-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <el-icon :size="48"><Box /></el-icon>
          </div>
          <h3>商品信息管理</h3>
          <p>管理商品基本信息、详情、规格等</p>
          <div class="module-links">
            <el-link type="primary" @click="navigateTo('/products/list')">商品列表</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/detail/new')">新建商品</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/batch-edit')">批量编辑</el-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="module-card">
          <div class="module-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <el-icon :size="48"><Grid /></el-icon>
          </div>
          <h3>分类与属性</h3>
          <p>管理商品分类、属性、标签体系</p>
          <div class="module-links">
            <el-link type="primary" @click="navigateTo('/products/categories')">商品分类</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/attributes')">商品属性</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/tags')">商品标签</el-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="module-card">
          <div class="module-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <el-icon :size="48"><Money /></el-icon>
          </div>
          <h3>价格管理</h3>
          <p>管理商品价格、优惠策略</p>
          <div class="module-links">
            <el-link type="primary" @click="navigateTo('/products/pricing')">价格管理</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/codes')">编码管理</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/sku')">SKU管理</el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="modules-row">
      <el-col :span="8">
        <el-card shadow="hover" class="module-card">
          <div class="module-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <el-icon :size="48"><Medal /></el-icon>
          </div>
          <h3>品牌管理</h3>
          <p>管理商品品牌信息和品牌档案</p>
          <div class="module-links">
            <el-link type="primary" @click="navigateTo('/products/brands')">品牌列表</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/brands/add')">添加品牌</el-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="module-card">
          <div class="module-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
            <el-icon :size="48"><Management /></el-icon>
          </div>
          <h3>单位与换算</h3>
          <p>管理商品单位和单位换算关系</p>
          <div class="module-links">
            <el-link type="primary" @click="navigateTo('/products/units')">单位管理</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/unit-conversion')">单位换算</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/packaging')">包装规格</el-link>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="module-card">
          <div class="module-icon" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">
            <el-icon :size="48"><DataAnalysis /></el-icon>
          </div>
          <h3>数据统计</h3>
          <p>商品数据分析和统计报表</p>
          <div class="module-links">
            <el-link type="primary" @click="navigateTo('/products/dashboard')">数据看板</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" @click="navigateTo('/products/export')">数据导出</el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近操作 -->
    <el-card class="recent-operations">
      <template #header>
        <div class="card-header">
          <span>最近操作</span>
          <el-button type="primary" text @click="navigateTo('/products/list')">
            查看全部
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </template>
      <el-table :data="recentOperations" stripe>
        <el-table-column prop="time" label="操作时间" width="180" />
        <el-table-column prop="operator" label="操作人" width="120" />
        <el-table-column prop="action" label="操作类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getActionType(row.action)">{{ row.action }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="details" label="操作详情" show-overflow-tooltip />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="primary" size="small" text @click="handleViewProduct(row.productId)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, markRaw } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Plus, 
  Upload,
  Box,
  Grid,
  Medal,
  Files,
  Money,
  Management,
  DataAnalysis,
  CaretTop,
  CaretBottom,
  ArrowRight,
  Goods,
  List,
  PriceTag,
  Setting,
  Download
} from '@element-plus/icons-vue'

const router = useRouter()

// 统计数据
const statistics = reactive({
  totalProducts: 1856,
  productsTrend: 8.5,
  totalCategories: 128,
  activeCategories: 95,
  totalBrands: 86,
  topBrands: 15,
  totalSKUs: 3254,
  skuTrend: 12.3
})

// 快捷功能列表
const quickAccessList = ref([
  {
    name: '商品列表',
    desc: '查看所有商品',
    icon: markRaw(List),
    path: '/products/list',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    name: '新建商品',
    desc: '添加新商品',
    icon: markRaw(Plus),
    path: '/products/detail/new',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  {
    name: '商品分类',
    desc: '分类管理',
    icon: markRaw(Grid),
    path: '/products/categories',
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  {
    name: '价格管理',
    desc: '设置价格',
    icon: markRaw(PriceTag),
    path: '/products/pricing',
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  },
  {
    name: '批量导入',
    desc: '导入商品',
    icon: markRaw(Upload),
    path: '/products/import',
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
  },
  {
    name: '数据导出',
    desc: '导出商品',
    icon: markRaw(Download),
    path: '/products/export',
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
  }
])

// 最近操作
const recentOperations = ref([
  {
    time: '2024-01-19 14:30:25',
    operator: '张三',
    action: '新建',
    productName: 'iPhone 15 Pro',
    details: '新建商品：iPhone 15 Pro 256GB 黑色',
    productId: 1
  },
  {
    time: '2024-01-19 14:15:18',
    operator: '李四',
    action: '编辑',
    productName: 'MacBook Pro',
    details: '修改价格：12999.00 → 11999.00',
    productId: 2
  },
  {
    time: '2024-01-19 13:58:42',
    operator: '王五',
    action: '删除',
    productName: '旧款手机壳',
    details: '删除过期商品',
    productId: 3
  },
  {
    time: '2024-01-19 13:45:36',
    operator: '赵六',
    action: '上架',
    productName: 'AirPods Pro',
    details: '商品上架并设置库存',
    productId: 4
  },
  {
    time: '2024-01-19 13:20:15',
    operator: '张三',
    action: '编辑',
    productName: 'iPad Air',
    details: '更新商品描述和图片',
    productId: 5
  }
])

// 方法
const navigateTo = (path) => {
  router.push(path)
}

const handleAddProduct = () => {
  router.push('/products/detail/new')
}

const handleImport = () => {
  router.push('/products/import')
}

const handleViewProduct = (productId) => {
  router.push(`/products/detail/${productId}`)
}

const getActionType = (action) => {
  const typeMap = {
    '新建': 'success',
    '编辑': 'primary',
    '删除': 'danger',
    '上架': 'success',
    '下架': 'warning'
  }
  return typeMap[action] || 'info'
}
</script>

<style scoped>
.products-index {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.banner-content h1 {
  font-size: 32px;
  margin: 0 0 12px 0;
}

.banner-content p {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.banner-actions {
  display: flex;
  gap: 12px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 32px;
}

.stat-trend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.trend.up {
  color: #67c23a;
}

.trend.down {
  color: #f56c6c;
}

.trend-label,
.trend-info {
  font-size: 12px;
  color: #909399;
}

.quick-access {
  margin-bottom: 20px;
}

.quick-item {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.quick-item:hover {
  background: #f5f7fa;
  transform: translateY(-3px);
}

.quick-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.quick-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.quick-desc {
  font-size: 12px;
  color: #909399;
}

.modules-row {
  margin-bottom: 20px;
}

.module-card {
  text-align: center;
  padding: 20px;
  transition: all 0.3s ease;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.module-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.module-card h3 {
  font-size: 20px;
  color: #303133;
  margin: 0 0 12px 0;
}

.module-card p {
  font-size: 14px;
  color: #909399;
  margin: 0 0 20px 0;
}

.module-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.recent-operations {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

